Improve support for conditional Square payments by Crabcyborg · Pull Request #2594 · Strategy11/formidable-forms

Crabcyborg · 2025-11-19T21:06:16Z

Related issue https://github.com/Strategy11/formidable-pro/issues/6100

This is mostly copied from where I added the same support for Stripe Link (https://github.com/Strategy11/formidable-stripe/pull/332).

When the Payment field is conditionally hidden (or the section it is in is conditionally hidden), the submit button should not be disabled when Stripe Link is incomplete.
When the payment field is made visible, the submit button will be disabled if Stripe link is incomplete.

Summary by CodeRabbit

Bug Fixes

Improved Square payment form behavior when the card field is conditionally hidden or shown.
Prevented payment submission from being blocked when the card field is unavailable due to form conditions.
Improved initialization when the card field becomes visible.
Updated submit-button availability automatically as payment fields, sections, or button conditions change.

coderabbitai · 2026-04-27T18:20:45Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 0ff1f005-f9ca-478e-8fbb-03cb3e673eeb

📥 Commits

Reviewing files that changed from the base of the PR and between 13351f6 and fc9be06.

📒 Files selected for processing (1)

square/js/frontend.js

🚧 Files skipped from review as they are similar to previous changes (1)

square/js/frontend.js

📝 Walkthrough

Walkthrough

Square card initialization and submission handling now account for conditionally hidden fields and sections. The frontend adds visibility checks, conditional submit-state logic, and mutation observers that resize the card and retoggle submission as visibility changes.

Changes

Square conditional visibility

Layer / File(s)	Summary
Visibility and submit-state detection `square/js/frontend.js`	Helpers detect hidden payment fields, parse form identifiers, and identify conditionally disabled submit buttons.
Submission gating updates `square/js/frontend.js`	Validity handling and `squareInit()` preserve submission when the Square card is hidden and respect conditional submit-button rules.
Visibility mutation handling `square/js/frontend.js`	Observers track payment-field, section, and submit-button changes. The frontend waits for visible layout, recalculates Square sizing, and restores submission state.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Form
  participant SquareCard
  participant PaymentField
  participant MutationObserver
  participant SubmitButton

  Form->>SquareCard: initialize payment field
  SquareCard->>SubmitButton: set state from conditional visibility
  PaymentField->>MutationObserver: emit attribute mutation
  MutationObserver->>Form: re-evaluate field and section state
  Form->>SubmitButton: enable or disable submission
  Form->>SquareCard: recalculate size when visible

Possibly related PRs

Strategy11/formidable-forms#3110: Updates Square card validity and submission handling in square/js/frontend.js.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: improved handling of conditional Square payment behavior.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch improve_support_for_conditional_square

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

deepsource-io · 2026-04-27T18:22:25Z

DeepSource Code Review

We reviewed changes in e3ee649...fc9be06 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade	Security Reliability Complexity Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
PHP		Aug 7, 2026 1:34p.m.	Review ↗
JavaScript		Aug 7, 2026 1:34p.m.	Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

deepsource-io · 2026-04-27T18:23:23Z

+	 * @returns {bool}
+	 */
+	function submitButtonIsConditionallyDisabled( formId ) {
+		return submitButtonIsConditionallyNotAvailable( formId ) && 'disable' === __FRMRULES[ 'submit_' + formId ].hideDisable;


Unexpected string concatenation

In ES2015 (ES6), we can use template literals instead of string concatenation.

deepsource-io · 2026-04-27T18:23:23Z

+	 * @returns bool
+	 */
+	function submitButtonIsConditionallyNotAvailable( formId ) {
+		var hideFields = document.getElementById( 'frm_hide_fields_' + formId );


Unexpected var, use let or const instead

It is recommended to use let or const over var.
This will help prevent re-declaration of variables that are in the global scope when using var.

deepsource-io · 2026-04-27T18:23:23Z

+	 * @returns bool
+	 */
+	function submitButtonIsConditionallyNotAvailable( formId ) {
+		var hideFields = document.getElementById( 'frm_hide_fields_' + formId );


Unexpected string concatenation

In ES2015 (ES6), we can use template literals instead of string concatenation.

deepsource-io · 2026-04-27T18:23:23Z

+	 */
+	function submitButtonIsConditionallyNotAvailable( formId ) {
+		var hideFields = document.getElementById( 'frm_hide_fields_' + formId );
+		return hideFields && -1 !== hideFields.value.indexOf( '["frm_form_' + formId + '_container .frm_final_submit"]' );


Unexpected string concatenation

In ES2015 (ES6), we can use template literals instead of string concatenation.

deepsource-io · 2026-04-27T18:29:35Z

+	 */
+	function submitButtonIsConditionallyNotAvailable( formId ) {
+		const hideFields = document.getElementById( `frm_hide_fields_${ formId }` );
+		return hideFields && hideFields.value.includes( `["frm_form_${ formId }_container .frm_final_submit"]` );


Prefer using an optional chain expression instead, as it's more concise and easier to read

The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

deepsource-io · 2026-07-20T18:35:52Z

+	 */
+	function submitButtonIsConditionallyNotAvailable( formId ) {
+		const hideFields = document.getElementById( `frm_hide_fields_${ formId }` );
+		return hideFields && hideFields.value.includes( `["frm_form_${ formId }_container .frm_final_submit"]` );


Prefer using an optional chain expression instead, as it's more concise and easier to read

The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

coderabbitai

Actionable comments posted: 3

🧹 Nitpick comments (1)

square/js/frontend.js (1)
440-443: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Filter observed attributes for better performance.

Currently, the observer is triggered by all attribute changes (e.g., class, id) and then manually filtered in handleMutation. Supplying attributeFilter: [ 'style' ] prevents the browser from emitting unnecessary mutation events, providing a performance optimization.
⚡ Proposed optimization
 		observer.observe(
 			element,
-			{ attributes: true }
+			{ attributes: true, attributeFilter: [ 'style' ] }
 		);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@square/js/frontend.js` around lines 440 - 443, Update the MutationObserver
configuration in the observer.observe call to include attributeFilter containing
only “style”, while preserving attribute observation and the existing
handleMutation processing.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@square/js/frontend.js`:
- Line 414: Remove the redundant `'none' === mutation.target.display` condition
from the shouldEnable assignment in the mutation handling logic. Preserve the
existing squareCardElementIsComplete and squareIsConditionallyDisabled(form)
checks unchanged.
- Line 424: Update the mutation handling in listenForFieldMutations to guard the
cardGlobal.recalculateSize() call when cardGlobal is undefined during
initialization. Only recalculate the size once cardGlobal has been assigned,
while preserving the existing behavior after initializeCard completes.
- Around line 456-458: Update submitButtonIsConditionallyDisabled to use
optional chaining when accessing __FRMRULES[ `submit_${ formId }` ].hideDisable,
so missing global or form-specific rules safely yield an undefined property
result without throwing.

---

Nitpick comments:
In `@square/js/frontend.js`:
- Around line 440-443: Update the MutationObserver configuration in the
observer.observe call to include attributeFilter containing only “style”, while
preserving attribute observation and the existing handleMutation processing.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 57968a5b-1493-4983-a3aa-53aa39a1c6d9

📥 Commits

Reviewing files that changed from the base of the PR and between 057c563 and eb724db.

📒 Files selected for processing (1)

square/js/frontend.js

garretlaxton · 2026-07-24T04:40:09Z

This fixes the submit issue, but when the payment field is hidden, it still throws an error Please enter a valid credit card when submitting the form.

Crabcyborg · 2026-07-27T13:19:32Z

@garretlaxton Did you also mark the payment action as conditional? It looks like it's still triggering. The conditional logic needs to be on the field and the action.

garretlaxton

That was the issue. This looks good though. I was only able to find something unrelated to this PR https://github.com/Strategy11/formidable-pro/issues/6529

Crabcyborg · 2026-08-07T13:35:36Z

Thanks @garretlaxton.

I did intend on properly supporting submit button conditional logic as well in this update.

I've made some new changes that should get it working as expected.

Can you test it against that new issue?

Thank you!

Crabcyborg added 3 commits November 19, 2025 17:05

Improve support for conditional square

8df9923

Update since versions, remove each function (not necessary)

abd1b99

Call recalculate size after conditionally showing the payment field

ffe463f

Crabcyborg changed the title ~~Improve support for conditional square~~ Improve support for conditional Square payments Nov 19, 2025

Crabcyborg added the run analysis label Nov 19, 2025

Crabcyborg added this to the 6.27 milestone Dec 8, 2025

Crabcyborg modified the milestones: 6.27, 6.28 Jan 5, 2026

Crabcyborg modified the milestones: 6.28, 6.29 Feb 12, 2026

Crabcyborg modified the milestones: 6.29, 6.30 Mar 9, 2026

Crabcyborg modified the milestones: 6.30 (Pricing Fields), 6.31 (PayPal Commerce) Apr 15, 2026

Merge branch 'master' into improve_support_for_conditional_square

292d64a

deepsource-io Bot reviewed Apr 27, 2026

View reviewed changes

Run eslint fixer

880260d

deepsource-io Bot reviewed Apr 27, 2026

View reviewed changes

Simplify

47f7574

Crabcyborg added the run tests label Apr 27, 2026

Fix more eslint issues

f94f0ef

Crabcyborg modified the milestones: 6.31 (Form Action Refresh, PayPal Commerce), 6.32 May 26, 2026

Crabcyborg modified the milestones: 6.32, 6.33 Jun 16, 2026

Crabcyborg modified the milestones: 6.33, 6.34 Jul 14, 2026

Merge branch 'master' into improve_support_for_conditional_square

5808b8c

Fix condition

eb724db

Crabcyborg marked this pull request as ready for review July 20, 2026 18:33

deepsource-io Bot reviewed Jul 20, 2026

View reviewed changes

coderabbitai Bot reviewed Jul 20, 2026

View reviewed changes

Comment thread square/js/frontend.js Outdated

Comment thread square/js/frontend.js Outdated

Comment thread square/js/frontend.js

Crabcyborg added 2 commits July 20, 2026 15:59

Fix layout issue

39e6e04

Fix bugs

d611ed3

Crabcyborg requested a review from garretlaxton July 20, 2026 19:09

Fix height issues

13351f6

garretlaxton approved these changes Jul 27, 2026

View reviewed changes

Crabcyborg added 2 commits August 7, 2026 10:04

Merge branch 'master' into improve_support_for_conditional_square

e070ea5

Try to improve compatibility with submit button conditional logic

fc9be06

Crabcyborg requested a review from garretlaxton August 7, 2026 19:48

Uh oh!

Conversation

Crabcyborg commented Nov 19, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Bug Fixes

Uh oh!

coderabbitai Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

deepsource-io Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DeepSource Code Review

PR Report Card

Code Review Summary

Uh oh!

Uh oh!

deepsource-io Bot Apr 27, 2026

Choose a reason for hiding this comment

Unexpected string concatenation

Uh oh!

deepsource-io Bot Apr 27, 2026

Choose a reason for hiding this comment

Unexpected var, use let or const instead

Uh oh!

deepsource-io Bot Apr 27, 2026

Choose a reason for hiding this comment

Unexpected string concatenation

Uh oh!

deepsource-io Bot Apr 27, 2026

Choose a reason for hiding this comment

Unexpected string concatenation

Uh oh!

deepsource-io Bot Apr 27, 2026

Choose a reason for hiding this comment

Prefer using an optional chain expression instead, as it's more concise and easier to read

Uh oh!

deepsource-io Bot Jul 20, 2026

Choose a reason for hiding this comment

Prefer using an optional chain expression instead, as it's more concise and easier to read

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

garretlaxton commented Jul 24, 2026

Uh oh!

Crabcyborg commented Jul 27, 2026

Uh oh!

garretlaxton left a comment

Choose a reason for hiding this comment

Uh oh!

Crabcyborg commented Aug 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Crabcyborg commented Nov 19, 2025 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 27, 2026 •

edited

Loading

deepsource-io Bot commented Apr 27, 2026 •

edited

Loading